<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="hg-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./lib/admin/admin.css" media="all">
    <link rel="stylesheet" href="./lib/Scrollbar/jquery.scrollbar.css">
    <script type="text/javascript" src="./lib/admin/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="./lib/Scrollbar/jquery.scrollBar.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js"></script>
    <script type="text/javascript" src="./lib/admin/admin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body class="layui-body-content">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title x-nav">
            <li class="layui-this">分页批量删除</li>
            <li>多个数据表格</li>
            <li>分页导出所有数据</li>
            <a href="javascript:;" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
                title="刷新">
                <i class="layui-icon layui-icon-refresh-3" style="line-height:30px"></i>
            </a>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-fluid">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12 layui-col-sm12">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    <button class="layui-btn layui-btn-lg layui-btn-normal"
                                        onclick="hg.open('添加用户','./DataGrid-add.html',600,400)"><i
                                            class="layui-icon">&#xe654;</i>添加</button>
                                    <button class="layui-btn layui-btn-lg layui-btn-warm" onclick="edit()"><i
                                            class="layui-icon">&#xe642;</i>修改</button>
                                    <button class="layui-btn layui-btn-lg layui-btn-danger" onclick="del()"><i
                                            class="layui-icon">&#xe640;</i>删除</button>
                                    <form class="layui-form layui-inline">
                                        <div class="layui-inline layui-show-xs-block">
                                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start"
                                                id="start">
                                        </div>
                                        <div class="layui-inline layui-show-xs-block">
                                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end"
                                                id="end">
                                        </div>
                                        <div class="layui-inline layui-show-xs-block">
                                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                                class="layui-input">
                                        </div>
                                        <div class="layui-inline layui-show-xs-block">
                                            <button class="layui-btn layui-btn-lg layui-btn-normal" lay-submit lay-filter="sreach"><i
                                                    class="layui-icon layui-icon-lg">&#xe615;</i></button>
                                        </div>
                                    </form>
                                </div>
                                <div class="layui-card-body layui-table-body layui-table-main">
                                    <table class="layui-hide" id="test" lay-filter="test"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                <div class="layui-col-md3 layui-col-sm3">
                    <div class="layui-fluid" style="padding-right: 0;">
                        <div class="layui-card">
                            <div class="layui-card-body layui-table-body layui-table-main">
                                部门树：
                                <div class="layui-btn-container">
                                    <button type="button" class="layui-btn layui-btn-sm" lay-demo="addtree">添加</button>
                                    <button type="button" class="layui-btn layui-btn-sm" lay-demo="dittree">修改</button>
                                    <button type="button" class="layui-btn layui-btn-sm" lay-demo="deltree">删除</button>
                                </div>
                                <div id="treelist" class="demo-tree demo-tree-box"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md9 layui-col-sm9">
                    <div class="layui-row">
                        <div class="layui-fluid">
                            <div class="layui-card">
                                <div class="layui-card-body layui-table-body layui-table-main">
                                    用户管理：
                                    <table class="layui-hide" id="test2" lay-filter="test2"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-fluid" style="margin-top: -10px">
                            <div class="layui-card">
                                <div class="layui-card-body layui-table-body layui-table-main">
                                    权限服务：
                                    <table class="layui-hide" id="test3" lay-filter="test3"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="layui-tab-item">
                <div class="layui-fluid">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12 layui-col-sm12">
                            <div class="layui-card">
                                <div class="layui-card-header">
                                    <button class="layui-btn layui-btn-lg layui-btn-normal" onclick="exportfile()"><i
                                            class="layui-icon">&#xe601;</i>导出所有数据</button>
                                    <form class="layui-form layui-inline">
                                        <div class="layui-inline layui-show-xs-block">
                                            <input class="layui-input" autocomplete="off" placeholder="开始日"
                                                name="start2" id="start2">
                                        </div>
                                        <div class="layui-inline layui-show-xs-block">
                                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end2"
                                                id="end2">
                                        </div>
                                        <div class="layui-inline layui-show-xs-block">
                                            <button class="layui-btn layui-btn-lg layui-btn-normal" lay-submit lay-filter="sreach"><i
                                                    class="layui-icon layui-icon-lg">&#xe615;</i></button>
                                        </div>
                                    </form>
                                </div>
                                <div class="layui-card-body layui-table-body layui-table-main">
                                    <table class="layui-table" id="test4" lay-filter="test4"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-fluid">
            <div class="layui-col-md12 layui-col-sm12 layui-floor">
                <blockquote class="layui-elem-quote layui-quote-nm">Copyright©2019-2020, 本系统由x-admin-code提供技术支持！
                </blockquote>
            </div>
        </div>
    </div>
</body>
<!-- 分页批量删除 -->
<script>
    //修改
    function edit(obj) {
        //obj通过行tool修改-lay-event
        var row = obj ? obj : hg.table.datatable('test', 'getSelected');
        if (row) {
            hg.open('修改用户' + row.data.username, './DataGrid-add.html', 600, 400);
        } else {
            hg.msg('请选中一行数据，再操作！');
        }
    }
    //删除
    function del(obj) {
        //obj通过行tool删除-lay-event
        var row = obj ? obj : hg.table.datatable('test', 'getSelected');
        if (row) {
            hg.confirm("删除当前选中的用户，确定要删除吗？", function () {
                row.del(); //只删本地数据
                hg.msg('删除成功！');
                hg.table.datatable('test', 'reload');
            });
        } else {
            hg.msg('请选中一行数据，再操作！');
        }
    }
    //监听switch操作事件
    hg.form.onswitch('doflag',function(data){
        hg.msg(data.elem.name+'开关checked：'+(data.elem.checked===true?'开启':'禁用'));
        console.log(data.elem.checked);
        console.log(data.elem.name);
        console.log(data.elem.value);
        console.log(data.othis);
    });
    //监听表单提交事件
    hg.form.onsubmit('sreach', function (data) {
        var start = data.start;
        var end = data.end;
        if (start && end) {
            if (start > end) {
                hg.msg("时间范围错误，请重新选择!");
                return false;
            }
        } else if (start || end) {
            hg.msg("时间范围错误，请重新选择!");
            return false;
        }
        hg.msg(JSON.stringify(data));
        hg.table.datatable('test', 'reload', data);
    });
    //日期控件
    hg.datetime('#start', '#end', {
        type: 'datetime',
        value: hg.getdate('datetime', -30),
        value2: hg.getdate('datetime', '23:59:59'),
        min: hg.getdate('date', -365),
        max: hg.getdate(),
    });
    var tableCols = [
        [{
            type: 'checkbox'
        }, {
            field: 'id',
            width: 80,
            title: 'ID',
            sort: true
        }, {
            field: 'username',
            width: 80,
            title: '用户名',
            style: 'color: #ff5722;'
        }, {
            field: 'sex',
            width: 80,
            title: '性别',
            sort: true
        }, {
            field: 'city',
            width: 80,
            title: '城市',
            hide: true
        }, {
            field: 'sign',
            title: '签名',
            width: '20%',
            minWidth: 100
        }, {
            field: 'experience',
            title: '积分',
            sort: true,
            templet: function (d) {
                if (d.experience > 500) {
                    return '<span style="color: #F581B1;">' + d.experience + '</span>';
                }
                return d.experience;
            }
        }, {
            field: 'score',
            title: '评分',
            sort: true
        }, {
            field: 'classify',
            title: '职业'
        }, {
            field: 'wealth',
            width: 80,
            title: '部门',
            templet: function (d) {
                return '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="depts">查看</a>'
            }
        }, {
            field: 'flag',
            width: 100,
            title: '是否禁用',
            templet: function (d) {
                var checked = d.flag == 0 ? 'checked' : '';
                return '<input type="checkbox" name ="' + d.id + '" value= ' + d.flag +
                    ' lay-skin="switch" lay-text="开启|禁用" lay-filter="doflag" ' + checked + '>'
            }
        }, {
            field: 'right',
            width: 120,
            title: '操作',
            templet: function (d) {
                return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
            }
        }]
    ];
    var toolbar = [{
            text: '添加',
            layuiicon: '&#xe608;',
            handler: function () {
                hg.open('添加用户', './DataGrid-add.html', 600, 400);
            }
        },
        {
            text: '修改',
            layuiicon: '&#xe642;',
            handler: function (obj, row) {
                if (row) {
                    hg.open('修改用户' + row.data.username, './DataGrid-add.html', 600, 400);
                } else {
                    hg.msg('请选中一行数据，再操作！');
                }
            }
        }, {
            text: '批量删除',
            layuiicon: '&#xe640;',
            handler: function (obj, row) {
                if (obj.checkstatus && obj.checkstatus.data.length > 0) {
                    hg.confirm("批量删除当前所有选中的用户，确定要删除吗？", function () {
                        // $(".layui-table-view[lay-id='test'] .layui-form-checked").not('.header').parents('tr').remove();
                        hg.msg('批量删除成功！');
                        hg.table.datatable('test', 'reload');
                    });
                } else {
                    hg.msg('请选中一个或多个复选框，再操作！');
                }
            }
        }, {
            text: '获取选中行数据',
            layuiicon: '&#xe615;',
            handler: function (obj, row) {
                var json = '[]';
                if (obj.checkstatus) {
                    console.log(obj.checkstatus);
                    json = JSON.stringify(obj.checkstatus.data);
                }
                hg.msg(json);
            }
        }
    ];
    //数据表格
    hg.table.datatable('test', '用户管理', 'data1.json', {}, tableCols, toolbar, true, 'full', ['filter', 'print', 'exports']);
</script>

<!-- 多个数据表格 -->
<script>
    var tableCols_2 = [
        [{
            field: 'id',
            width: 80,
            title: 'ID',
            sort: true
        }, {
            field: 'username',
            width: 80,
            title: '用户名'
        }, {
            field: 'sex',
            width: 80,
            title: '性别',
            sort: true
        }, {
            field: 'city',
            width: 80,
            title: '城市',
            hide: true
        }, {
            field: 'sign',
            title: '签名',
            width: 340
        }, {
            field: 'experience',
            title: '积分',
            sort: true
        }, {
            field: 'score',
            title: '评分',
            sort: true
        }, {
            field: 'classify',
            title: '职业'
        }, {
            field: 'wealth',
            width: 80,
            title: '部门'
        }]
    ];
    var toolbar_2 = [{
            text: '添加',
            layuiicon: '&#xe608;',
            handler: function () {
                hg.open('添加用户', './DataGrid-add.html', 600, 400);
            }
        },
        {
            text: '修改',
            layuiicon: '&#xe642;',
            handler: function (obj, row) {
                if (row) {
                    hg.open('修改用户' + row.data.username, './DataGrid-add.html', 600, 400);
                } else {
                    hg.msg('请选中一行数据，再操作！');
                }
            }
        }, {
            text: '删除',
            layuiicon: '&#xe640;',
            handler: function (obj, row) {
                if (row) {
                    hg.confirm("删除当前选中的用户，确定要删除吗？", function () {
                        row.del(); //只删本地数据
                        hg.msg('删除成功！');
                        //obj.reload();
                    });
                } else {
                    hg.msg('请选中一行数据，再操作！');
                }
            }
        }
    ];
    hg.table.datatable('test2', '用户管理', 'data1.json', {}, tableCols_2, toolbar_2, false, 445, []);
    hg.table.datatable('test3', '用户管理', 'data1.json', {}, tableCols_2, toolbar_2, true, 245, []);

    //树形组件，懒加载模式
    var data = [{
        id: '144115188075855872',
        title: '哈尔滨市第三中学',
        spread: true,
        showCheckbox: false,
        children: [{
            id: '144396663052566528',
            title: '2016级学生',
            children: [{
                id: '144397762564194304',
                title: '2016级一班'
            }, {
                id: '144398862075822080',
                title: '2016级二班'
            }, {
                id: '144399961587449856',
                title: '2016级三班'
            }]
        }]
    }, {
        id: '144678138029277184',
        title: '教职工',
        spread: false,
        children: []
    }];
    hg.tree('treelist', data, {
        showCheckbox: true,
        showLine: true,
        accordion: false,
        onlyIconControl: false,
        click: function (obj) {
            console.log(obj.data); //得到当前点击的节点数据
            console.log(obj.state); //得到当前节点的展开状态：open、close、normal
            console.log(obj.elem); //得到当前节点元素
            console.log(obj.data.children); //当前节点下是否有子节点
        },
        oncheck: function (obj) {
            console.log(obj.data); //得到当前点击的节点数据
            console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
            console.log(obj.elem); //得到当前节点元素
        },
        spread: function (obj) {
            var data = getTreeJson(obj.data.id);
            obj.children('treelist', obj.data.id, data);
        }
    });
    // 模拟后台返回数据
    function getTreeJson(id) {
        if (id === '144678138029277184') {
            return [{
                id: '101',
                title: '子节点1'
            }, {
                id: '102',
                title: '子节点2',
                spread: false,
                children: []
            }];
        }
        if (id === '102') {
            return [{
                id: '10201',
                title: '子节点3'
            }, {
                id: '10202',
                title: '子节点4',
                spread: false,
                children: []
            }];
        }
        if (id === '10202') {
            return [{
                id: '1020201',
                title: '子节点5'
            }, {
                id: '1020202',
                title: '子节点6',
                children: []
            }];
        }
    }
</script>
<!-- 分页导出所有数据 -->
<script>
    hg.datetime('#start2', '#end2');
    hg.table.datatable('test4', '用户管理', 'data1.json', {}, tableCols_2, toolbar_2, true, 'full');
    //导出所有数据
    function exportfile() {
        var start = $("#start2").val();
        var end = $("#end2").val();
        if (start && end) {
            if (start > end) {
                hg.msg("时间范围错误，请重新选择!");
                return false;
            }
        } else if (start || end) {
            hg.msg("时间范围错误，请重新选择!");
            return false;
        }
        hg.request('data1.json', function (data) {
            if (data || data.total > 0) {
                hg.table.exportfile('test4', data.rows);
            }
        });
    }
</script>

</html>